<template>
  <v-card title="带工具栏">
    <div class="mb-30">
      <v-alert class="mb-10" type="info">
        <div slot="message">
          <div>
            配置
            <span class="blue-text">hasToolbar</span> 为true
          </div>
        </div>
      </v-alert>

      <vcu-table
        :exportExcelUrl="exportExcelUrl"
        :filterFormData="filterFormData"
        :loadOptions="options"
        customModalShow
        filterModalShow
        hasToolbar
        height="200"
        ref="xTable"
      ></vcu-table>
    </div>

    <div class="mb-30">
      <v-alert class="mb-10" type="info">
        <div slot="message">
          <div>
            插槽
            <span class="blue-text">toolbarTop、toolbarBottom、toolbarRight、toolbarBefore、toolbarAfter</span>
          </div>
          <div>
            必须配置
            <span class="red-text">toolbarSlots</span>
          </div>
        </div>
      </v-alert>

      <vcu-table
        :exportExcelUrl="exportExcelUrl"
        :filterFormData="filterFormData"
        :loadOptions="options"
        :toolbarList="toolbarList"
        :toolbarSlots="toolbarSlots"
        customModalShow
        filterModalShow
        hasToolbar
        height="200"
        ref="xTable1"
      >
        <template v-slot:toolbarTop>
          <span class="blue-text">toolbarTop</span>
        </template>
        <template v-slot:toolbarBottom>
          <span class="red-text">toolbarBottom</span>
        </template>
        <template v-slot:toolbarBefore>
          <span class="green-text">toolbarBefore</span>
        </template>
        <template v-slot:toolbarAfter>
          <span class="cyan-text">toolbarAfter</span>
        </template>
        <template v-slot:toolbarRight>
          <span class="orange-text">toolbarRight</span>
        </template>
      </vcu-table>
    </div>

    <div class="mb-30">
      <v-alert class="mb-10" type="info">
        <div slot="message">
          <div>插槽JSX模式</div>
        </div>
      </v-alert>

      <vcu-table
        :exportExcelUrl="exportExcelUrl"
        :filterFormData="filterFormData"
        :loadOptions="options"
        :toolbarSlots="toolbarSlotsJsx"
        customModalShow
        filterModalShow
        hasToolbar
        height="200"
        ref="xTable2"
      ></vcu-table>
    </div>
  </v-card>
</template>
<script>
export default {
  data() {
    return {
      toolbarList: ["import", "print", "export", "column", "columnSave", "filter", "restore", "empty"],
      exportExcelUrl: "http://10.16.241.70:8089/dataq/export/getInHospPatientList",
      filterFormData: {
        filterFindUrl: "getInHospPatientList4cy",
        operationUrl: "dataq/api/dict/operation", //正式环境不需要
        relationUrl: "dataq/api/dict/relation", //正式环境不需要
        filterFindFormData: {
          deptNo: "14",
        },
      },
      options: {
        headUrl: "dataq/api/header/getInHospPatientList",
        pageUrl: "dataq/api/page/getInHospPatientList",
      },
      toolbarSlots: {
        toolbarTop: "toolbarTop",
        toolbarBottom: "toolbarBottom",
        toolbarRight: "toolbarRight",
        toolbarBefore: "toolbarBefore",
        toolbarAfter: "toolbarAfter",
      },
      toolbarSlotsJsx: {
        toolbarTop: () => {
          return [<span class="blue-text">toolbarTopJsx</span>];
        },
        toolbarBottom: () => {
          return [<span class="red-text">toolbarBottomJsx</span>];
        },
        toolbarRight: () => {
          return [<span class="green-text">toolbarRightJsx</span>];
        },
        toolbarBefore: () => {
          return [<span class="cyan-text mr-10">toolbarBeforeJsx</span>];
        },
        toolbarAfter: () => {
          return [<span class="orange-text">toolbarAfter</span>,<span class="blue-text">Jsx</span>];
        },
      },
    };
  },
  mounted() {},
  methods: {},
};
</script>

